import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// store
export default new Vuex.Store({
  // 开启严格模式
  strict: true,
  // 状态就是数据
  // 所以state里就是放数据的地方
  state: {
    count: 0,
    money: 99,
    // 这个数据就要发请求才能获得
    userInfo: {},
    // 购物车数据
    cartList: [
      { id: 1, name: '皮鞋', price: 9.9 },
      { id: 2, name: '凉鞋', price: 7699 },
      { id: 3, name: '外套', price: 2399 },
      { id: 4, name: '斜挎包', price: 17900 },
    ]
  },

  // 写vuex里计算属性的地方
  getters: {
    totalPrice (state) {
      return state.cartList.reduce((sum, v) => sum += v.price, 0)
    }
  },


  // 这就是vuex里放方法的地方
  // 也是唯一允许修改state的地方
  mutations: {

    setUserInfo (state, obj) {
      state.userInfo = obj
      // setTimeout(() => {
      //   state.userInfo = { name: 'jack', age: 16}
      // }, 1000);
    },

    // 参数1：固定的就叫state
    addCount (state) {
      state.count++
    },

    // 参数1：固定的state
    // 参数2：调用这个方法时，额外传进来的参数
    // 注意：只能接收一个额外的参数，所以如果要传递多个数据可以传一个数组或者传一个对象
    addCountWithNum (state, num) {
      // console.log(num ,num2)
      state.count += num
    }
  },

  // vuex里放异步代码的方法的地方
  actions: {
    // 参数1：固定的是context建议简写为ctx,代表了当前vuex对象(store对象)
    //               
    reqUserInfo (ctx, obj) {
      console.log(obj)
      // 写异步代码
      setTimeout(() => {
        // 假设这个res是服务器返回的数据
        const res = { name: 'jack', age: 16}
        // 要调用mutations里的方法来赋值给state
        ctx.commit('setUserInfo', res)

      }, 1000);
    }
  },
 
  modules: {
  }
})
